<template>
	<div class="bg-white p-4">
		<div v-if="pageShow">
			<div class="flex">
				<div class="w-1/2 pr-2">
					<!-- 基本信息 -->
					<div class="flex items-center">
						<t-skeleton :rowCol="rowCol" :loading="loading" animation="gradient">
							<img src="/images/status/headPortrait.png" alt="默认图片" style="width: 130px;height: 160px;" v-if="userPhotoShow">
							<BDMImage :authSrc="user_photo" style="width: 130px;height: 160px;" v-if="!userPhotoShow"></BDMImage>
						</t-skeleton>
						<div class="pl-4">
							<span class="text-gray-700 text-2xl font-medium">{{userInfo.nick_name}}</span>
							<div class="flex mb-2 mt-2">
								<div class="text-blue-700 pt-1 pb-1 pl-4 pr-4 bg-blue-100 rounded mr-2">{{sex}}</div>
								<div class="text-blue-700 pt-1 pb-1 pl-4 pr-4 bg-blue-100 rounded mr-2">{{userInfo.age}}岁
								</div>
								<div class="text-orange-700 pt-1 pb-1 pl-4 pr-4 bg-orange-100 rounded"
									v-show="stateShow[0]">{{state}}</div>
								<div class="text-green-700 pt-1 pb-1 pl-4 pr-4 bg-green-100 rounded" v-show="stateShow[1]">
									{{state}}
								</div>
								<div class="text-gray-700 pt-1 pb-1 pl-4 pr-4 bg-gray-100 rounded" v-show="stateShow[2]">
									{{state}}
								</div>
							</div>
							<span class="text-gray-400">权限：{{userInfo.authority_name}}</span>
						</div>
					</div>
					<!-- 个人信息 -->
					<div class="flex items-center justify-between mt-8 mb-4">
						<span class="text-gray-400">个人信息</span>
					</div>
					<div class="w-full bg-gray-100 p-4">
						<div class="flex">
							<div class="w-1/4">
								<span class="text-gray-700 font-medium">{{userInfo.name}}</span>
								<div class="text-gray-400">真实姓名</div>
							</div>
							<div class="w-1/4">
								<span class="text-gray-700 font-medium">{{userInfo.phone}}</span>
								<div class="text-gray-400">手机号码</div>
							</div>
							<div class="w-1/4">
								<span class="text-gray-700 font-medium">{{userInfo.birth_date}}</span>
								<div class="text-gray-400">出生日期</div>
							</div>
							<div class="w-1/4">
								<span class="text-gray-700 font-medium">{{userInfo.id_number ? userInfo.id_number : '-'}}</span>
								<div class="text-gray-400">身份证号码</div>
							</div>
						</div>
						<div class="flex mt-4">
							<div class="w-1/2">
								<span class="text-gray-700 font-medium">{{userInfo.address ? userInfo.address : '-'}}</span>
								<div class="text-gray-400">现住地址</div>
							</div>
							<div class="w-1/4">
								<span class="text-gray-700 font-medium">{{userInfo.bank ? userInfo.bank : '-'}}</span>
								<div class="text-gray-400">开户银行</div>
							</div>
							<div class="w-1/4">
								<span class="text-gray-700 font-medium">{{userInfo.bank_number ? userInfo.bank_number : '-'}}</span>
								<div class="text-gray-400">银行卡号</div>
							</div>
						</div>
					</div>
				</div>
				<div class="w-1/2 pl-2 flex-grow">
					<div class="h-full w-full flex flex-col">
						<!-- 保险信息 -->
						<div class="flex items-center justify-between mb-4">
							<span class="text-gray-400">保险信息</span>
						</div>
						<div class="p-4 bg-gray-100 flex-grow" style="overflow-y: auto; height: 0;">
							<ul>
								<li 
								class="flex mb-4" 
								v-for="(item, index) in insuranceArr" 
								:key="index"
								v-show="InsuranceListShow()">
									<div class="w-1/5">
										<span class="text-gray-700 font-medium">{{item.insurance_date}}</span>
										<div class="text-gray-400">上险日期</div>
									</div>
									<div class="w-1/5">
										<span class="text-gray-700 font-medium">{{item.type}}</span>
										<div class="text-gray-400">交保类型</div>
									</div>
									<div class="w-1/5">
										<span class="text-gray-700 font-medium">{{item.account_number}}</span>
										<div class="text-gray-400">保险账号</div>
									</div>
									<div class="w-2/5">
										<span class="text-gray-700 font-medium">{{item.remarks}}</span>
										<div class="text-gray-400">备注</div>
									</div>
								</li>
							</ul>
							<div v-show="!InsuranceListShow()">当前暂无保险信息</div>
						</div>
					</div>
				</div>
			</div>
			<div class="flex mt-8">
				<div class="w-1/2 pr-2">
					<!-- 岗位信息 -->
					<div class="flex items-center justify-between mb-4">
						<span class="text-gray-400">岗位信息</span>
						<div class="flex text-gray-400">
							已在贝德米渡过<span class="text-blue-700">{{userInfo.post_time}}</span>天
						</div>
					</div>
					<div class="bg-gray-100 p-4" style="min-height: 12rem;">
						<div class="flex">
							<div class="w-1/5">
								<span class="text-gray-700 font-medium">{{userInfo.department1_name}}</span>
								<div class="text-gray-400">所属部门</div>
							</div>
							<div class="w-1/5">
								<span class="text-gray-700 font-medium">{{userInfo.position_name}}</span>
								<div class="text-gray-400">岗位</div>
							</div>
							<div class="w-1/5">
								<span class="text-gray-700 font-medium">{{userInfo.entry_date}}</span>
								<div class="text-gray-400">入职时间</div>
							</div>
							<div class="w-1/5">
								<span class="text-gray-700 font-medium">{{userInfo.try_out_money}}</span>
								<div class="text-gray-400">试用工资</div>
							</div>
						</div>
						<div class="flex mt-4 mb-4" v-show="stateShow[1] || stateShow[2]">
							<div class="w-2/5"></div>
							<div class="w-1/5">
								<span class="text-gray-700 font-medium">{{userInfo.regularization_date}}</span>
								<div class="text-gray-400">转正时间</div>
							</div>
							<div class="w-1/5">
								<span class="text-gray-700 font-medium">{{userInfo.official_salary}}</span>
								<div class="text-gray-400">转正工资</div>
							</div>
						</div>
						<div class="flex" v-show="stateShow[2]">
							<div class="w-2/5"></div>
							<div class="w-1/5">
								<span class="text-gray-700 font-medium">{{userInfo.leave_date}}</span>
								<div class="text-gray-400">离职时间</div>
							</div>
							<div class="w-1/5">
								<span class="text-gray-700 font-medium">{{userInfo.leave_reason}}</span>
								<div class="text-gray-400">离职原因</div>
							</div>
						</div>
					</div>
				</div>
				<div class="w-1/2 pl-2 flex-grow">
					<div class="flex h-full w-full flex-col">
						<span class="text-gray-400 mb-4">考勤信息</span>
						<div class="bg-gray-100 flex-grow">
							<div class="h-full w-full flex items-center justify-between p-4">
								<div class="w-1/5 h-1/2 flex flex-col justify-between">
									<div class="text-center text-3xl text-blue-700">{{attendance.s_office_day}}</div>
									<div class="text-gray-400 text-center">本月已累计在岗/天</div>
								</div>
								<div class="w-1/5 h-1/2 flex flex-col justify-between">
									<div class="text-center text-3xl text-gray-700">{{attendance.s_overtime_day}}</div>
									<div class="text-gray-400 text-center">加班时长/h</div>
								</div>
								<div class="w-1/5 h-1/2 flex flex-col justify-between">
									<div class="text-center text-3xl text-gray-700">{{attendance.s_rest_day}}</div>
									<div class="text-gray-400 text-center">已调休/天</div>
								</div>
								<div class="w-1/5 h-1/2 flex flex-col justify-between">
									<div class="text-center text-3xl text-gray-700">
										{{attendance.s_rest_all_day - attendance.s_rest_day}}
									</div>
									<div class="text-gray-400 text-center">剩余休息/天</div>
								</div>
								<div class="w-1/5 h-1/2 flex flex-col justify-between">
									<div class="text-center text-gray-700 font-medium" style="padding-top: 5%;">
										{{attendance.last_rest_date ? attendance.last_rest_date : '-'}}
									</div>
									<div class="text-gray-400 text-center">最近调休日期</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="flex mt-4">
				<div class="w-1/2 flex pr-2">
					<t-button variant="outline" class="mr-4" v-show="trial_contractButtonShow"
						@click="fileDownload(userInfo.trial_contract, '试用合同')">
						<DownloadIcon slot="icon" />
						试用合同下载
					</t-button>
					<t-button variant="outline" class="mr-4" v-show="regularization_pdfButtonShow"
						@click="fileDownload(userInfo.regularization_pdf, '转正合同')">
						<DownloadIcon slot="icon" />
						转正合同下载
					</t-button>
					<t-button variant="outline" v-show="leave_pdfButtonShow"
						@click="fileDownload(userInfo.leave_pdf, '离职证明')">
						<DownloadIcon slot="icon" />
						离职证明下载
					</t-button>
				</div>
				<div class="w-1/2 flex justify-between pl-2">
					<t-button variant="outline" @click="salary()">工资记录</t-button>
				</div>
			</div>
		</div>
		<MySalary v-if="!pageShow"></MySalary>
	</div>
</template>

<script>
	import { DownloadIcon } from 'tdesign-icons-vue'
	import BDMImage from '@/components/BDMImage'
	import { toDay } from '@/unit/myDate'
	import { getToken, getUserId } from '@/unit/auth'
	import MySalary from './MySalary'
	import { serveHttp } from '@/unit/config'
	
	export default {
		name: 'MyUserInfo',
		components: {
			DownloadIcon,
			BDMImage,
			MySalary
		},
		data() {
			return {
				user_photo: '',
				userPhotoShow: true,
				stateShow: [false, false, false],
				trial_contractButtonShow: false,
				regularization_pdfButtonShow: false,
				leave_pdfButtonShow: false,
				rowCol: [{
					type: 'rect',
					content: '头像加载中',
					width: '130px',
					height: '160px',
				}],
				loading: true,
				pageShow: true
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.user.userInfoData[1]
			},
			insuranceArr() {
				return this.$store.state.user.userInfoData[2]
			},
			attendance() {
				return this.$store.state.user.userInfoData[3]
			},
			sex() {
				if (this.userInfo.sex) {
					return '女'
				} else {
					return '男'
				}
			},
			state() {
				if (this.userInfo.state === 0) {
					return '实习'
				} else if (this.userInfo.state === 1) {
					return '已转正'
				} else if (this.userInfo.state === 2) {
					return '已离职'
				}
			},
			// 获取token设置请求头
			token() {
				let obj = {
					"Authorization": getToken()
				}
				return obj
			},
		},
		methods: {
			// 跳转到工资记录页
			salary(){
				this.pageShow = false
			},
			// 请求用户详细信息
			getUser(id) {
				this.$store.dispatch('user/getUser', id).then(res => {
					if (res.status === 1) {
						return this.$message.error(res.message)
					}
					// 头像处理
					if (this.userInfo.user_photo) {
						this.user_photo = serveHttp + this.userInfo.user_photo
						this.userPhotoShow = true
						this.$nextTick(() => {
							this.userPhotoShow = false
						})
					} else {
						this.userPhotoShow = true
					}
					// 岗位状态处理
					if (this.userInfo.state === 0) {
						for (let i = 0; i < this.stateShow.length; i++) {
							this.stateShow[i] = false
						}
						this.stateShow[0] = true
					} else if (this.userInfo.state === 1) {
						for (let i = 0; i < this.stateShow.length; i++) {
							this.stateShow[i] = false
						}
						this.stateShow[1] = true
					} else if (this.userInfo.state === 2) {
						for (let i = 0; i < this.stateShow.length; i++) {
							this.stateShow[i] = false
						}
						this.stateShow[2] = true
					}
					// 合同下载按钮
					if (this.userInfo.trial_contract) {
						this.trial_contractButtonShow = true
					} else {
						this.trial_contractButtonShow = false
					}
					if (this.userInfo.regularization_pdf) {
						this.regularization_pdfButtonShow = true
					} else {
						this.regularization_pdfButtonShow = false
					}
					if (this.userInfo.leave_pdf) {
						this.leave_pdfButtonShow = true
					} else {
						this.leave_pdfButtonShow = false
					}
				})
			},
			// 办理保险按钮显示
			insuranceButtonShow() { 
				if(this.userInfo.state === 2){
					return false
				} else {
					return true
				}
			},
			// 编辑保险显示
			updateInsuranceShow() {
				if (this.insuranceArr.length > 0 && this.userInfo.state < 2) {
					return true
				} else {
					return false
				}
			},
			// 保险列表显示
			InsuranceListShow(){
				if (this.insuranceArr.length > 0){
					return true
				} else {
					return false
				}
			},
			// 封装下载文件的方法
			fileDownload(url, fileName) {
				this.$store.dispatch('dashboard/fileDownload', url).then(res => {
					const link = document.createElement('a');
					let blob = new Blob([res], {
						type: 'application/pptx;chartset=UTF-8'
					});
					link.style.display = 'none';
					link.href = URL.createObjectURL(blob);
					const newFileName = this.userInfo.name + '的' + fileName
					const fileType = url.substring(url.lastIndexOf(".") + 1)
					link.setAttribute('download', newFileName + '.' + fileType);
					document.body.appendChild(link);
					link.click();
					document.body.removeChild(link);
					window.URL.revokeObjectURL(link.href);
				})
			}
		},
		created() {
			// 调用请求用户详细数据
			this.getUser(getUserId())
			this.loading = false
			if(this.$route.query.salary == 'salary'){
				this.salary()
			}
		},
		mounted() {
			this.$bus.on('goMyUserInfo', () => {
				this.pageShow = true
			})
		}
	}
</script>